<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2841007_tqrg2us3cb.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2837357_s8u3n2x8ame.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/cookie.js"></script>
    <!-- <script src="../js/register.js"></script> -->
    <script src="../js/promise封装ajax.js"></script>

</head>

<body>
    <div class="site-nav">
        <div class="site-nav-bd">
            <ul class="site-nav-bd-1">
                <li class="menu">
                    <div>
                        <a href="../html/login.html">亲,请登录</a>
                        <a href="#">免费注册</a>
                    </div>
                </li>
                <li class="menu-mobile"> <a href="#">手机逛淘宝</a> </li>
            </ul>
            <ul class="site-nav-bd-2">
                <li class="menu-home">
                    <div class="menu-hd"><a href="taobao.html" class="h">淘宝首页</a></div>
                </li>
                <li class="menu-my-taobao">
                    <div class="menu-taobao">
                        <a href="#">我的淘宝</a>
                        <span class="iconfont icon-xiangxia"></span>
                    </div>

                    <div class="menu-bd-panel">
                        <a href="#">已买到的宝贝</a>
                        <a href="#">我的足迹</a>
                        <a href="#">爱逛街 </a>
                        <a href="#">淘宝达人</a>
                        <a href="#">新欢</a>
                    </div>

                </li>
                <li><span class="iconfont icon-gouwuche"></span><a href="#">购物车</a> <span class="iconfont icon-xiangxia"></span></li>
                <li class="menu-sc"><span class="iconfont icon-collection"></span><a href="#">收藏夹</a> <span class="iconfont icon-xiangxia"></span>
                    <div class="menu-bd-panel">
                        <a href="#">收藏的宝贝</a>
                        <a href="#">收藏的店铺</a>

                    </div>
                </li>
                <li>商品分类</li>
                <li>|</li>
                <li class="menu-m"><a href="">卖家中心</a> <span class="iconfont icon-xiangxia"></span>
                    <div class="menu-bd-panel">
                        <a href="#">免费开店</a>
                        <a href="">已卖出的宝</a>
                        <a href="">未卖出的宝</a>

                    </div>
                </li>
                <li class="menu-l"><a href="">联系客服</a> <span class="iconfont icon-xiangxia"></span>
                    <div class="menu-bd-panel">
                        <a href="#">消费者客户</a>
                        <a href="">卖家客服</a>

                    </div>
                </li>
                <li><a href="">网址导航</a> <span class="iconfont icon-xiangxia"></span></li>
            </ul>
        </div>

    </div>
    <div class="cont">
        <div class="header clear">
            <div class="log">
                <h1>
                    <a href=""><span class="iconfont icon-tianmao"></span></a>
                </h1>
            </div>
            <div class="log-input">
                <div class="ipt">
                    <input type="text" placeholder="搜索天猫商品/店铺">
                    <button>搜天猫</button>
                </div>
            </div>

        </div>

    </div>
    <div class="shangpin">
        <div class="spcontent">
            <div class="leftcommodity">
                <div class="wrapAll clear">
                    <div class="left">
                        <div class="showGoods">
                            <!-- <img class="smallImg" src="../day19/img/girlsmall1.jpg" alt="">
                            <div class="shadow"></div> -->
                        </div>
                        <ul class="showList">
                            <!-- <li class="active"><img src="../day19/img/girlsmall1.jpg" alt=""></li>
                            <li><img src="../day19/img/girlsmall2.jpg" alt=""></li>
                            <li><img src="../day19/img/girlsmall3.jpg" alt=""></li>
                            <li><img src="../day19/img/girlsmall4.jpg" alt=""></li> -->
                        </ul>
                    </div>
                    <div class="right">
                        <div class="rightcommodity">
                            <div class="rgt">

                            </div>
                            <!-- <p class="goodsName"><span>天猫淘宝</span>夏季新品北京布鞋透气网鞋男耐磨男鞋休闲鞋运动鞋厚底防滑潮鞋网面鞋男 A91灰色 39【收藏送袜子】</p>
                            <div class="goodsPrice">
                                <span>天猫淘宝价</span>
                                <span>促销</span>
                                <div class="pj">
                                    <p>累计评价</p>
                                    <a href="">100+</a>
                                </div>
                                <p class="jiage"><span>￥45.00</span> <a href="">降价通知</a> </p>

                                <p class="huangou"><span>换购</span>购买一件可优惠换购热销商品<a href="">立即换购</a></p>
                            </div> -->
                            <div class="dizhi">
                                <span>地址</span>
                                <select class="province">
                                    <option value="">请选择省份</option>
                                    <!-- <option value="A001">北京</option>
                                    <option value="A002">上海</option>
                                    <option value="A003">湖北</option>
                                    <option value="A004">湖南</option> -->
                                </select>
                                <select class="city" name="" id="">
                                    <option value="">请选择市/区</option>
                                    <!-- <option value="A001">朝阳</option>
                                    <option value="A002">海淀</option>
                                    <option value="A003">沙河</option>
                                    <option value="A004">上地</option> -->
                                </select>
                            </div>
                            <div class="kkk">
                                <button class="down">-</button>
                                <input type="text" name="" id="" class="inputs" value="1">
                                <button class="add">+</button>
                                <div class="addToCart">
                                    加入购物车
                                </div>
                            </div>

                        </div>
                        <div class="scaleGoods">
                            <!-- <img class="bigImg" src="../day19/img/girlbig1.jpg" alt=""> -->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script>
    $(async function() {

        var cookie = document.cookie;
        if (cookie) {
            var user = getCookie("lgc");
            if (user) {
                $(".menu").children().remove();
                $(".menu").append(` <a href="../html/login.html">${user}</a>
            <a class="del">退出</a>`)
            }
        }

        var url = urlParse();
        var gid = url.gid;

        var result = await detail({
            gid
        });

        var {
            status,
            data: {
                goodsId,
                goodsName,
                goodsPrice,
                goodsImg,
                smallPicList,
                bigPicList
            }
        } = result;
        $(".showGoods").html(`
                            <img class="smallImg" src="${bigPicList[0]}" alt="">
                            <div class="shadow"></div>
                    `);

        $(".scaleGoods").html(`
                             <img class="bigImg" src="${bigPicList[0]}" alt="">
                    `);

        $(".rgt").html(`  <p class="goodsName"><span>天猫淘宝</span>${goodsName}</p>
                            <div class="goodsPrice">
                                <span>天猫淘宝价</span>
                                <span>促销</span>
                                <div class="pj">
                                    <p>累计评价</p>
                                    <a href="">100+</a>
                                </div>
                                <p class="jiage"><span>￥${goodsPrice}</span> <a href="">降价通知</a> </p>

                                <p class="huangou"><span>换购</span>购买一件可优惠换购热销商品<a href="">立即换购</a></p>
                            </div>`)

        var xhr = new XMLHttpRequest(); //0

        xhr.open("get", "../json/proData.json", true); // 1

        xhr.send();

        xhr.onreadystatechange = function() {
            // 2  3   4 
            if (xhr.readyState == 4 && xhr.status == 200) {
                var text = xhr.responseText;
                // console.log(text);
                var data = JSON.parse(text);
                // console.log(data);

                var {
                    list: proList
                } = data;
                console.log(proList);


                var html = '<option value="">请选择省份</option>';
                proList.forEach(({
                    city_id,
                    name,
                    list
                }) => {
                    html += `<option value="${city_id}">${name}</option>`;
                })
                $(".province").html(html);
                $('.province').change(function() {
                    var cityId = this.value;
                    console.log(cityId);
                    if (cityId) {
                        var thisPro = proList.find(function(item) {
                            var {
                                city_id
                            } = item;
                            return city_id === cityId;
                        }); // [{}][0]
                        console.log(thisPro);

                        var {
                            list: cityList
                        } = thisPro;
                        var html = '<option value="">请选择市/区</option>';
                        cityList.forEach(({
                            city_id,
                            name
                        }) => {
                            html += `<option value="${city_id}">${name}</option>`;
                        })
                        $(".city").html(html);

                    }
                })

            }
        }

        var html = "";

        var len = smallPicList.length >= 6 ? 6 : smallPicList.length
        for (var i = 0; i < len; i++) {
            html += `<li class=""><img src="${smallPicList[i]}" alt=""></li>`

        }
        $(".showList").html(html);
        var shadow = document.getElementsByClassName('shadow')[0];
        var showGoods = document.getElementsByClassName('showGoods')[0];
        var smallImg = document.getElementsByClassName('smallImg')[0];
        var bigImg = document.getElementsByClassName('bigImg')[0];
        var scaleGoods = document.getElementsByClassName('scaleGoods')[0];
        var showList = document.getElementsByClassName('showList')[0];
        var right = document.getElementsByClassName("right")[0];
        var li = showList.getElementsByTagName('li');
        var maxleft = null;
        var maxtop = null;
        var sacle = null;

        showGoods.onmouseenter = function() {
            shadow.style.display = 'block';
            scaleGoods.style.display = 'block';
            // right.style.display = 'block';
            maxleft = showGoods.clientWidth - shadow.clientWidth;
            maxtop = showGoods.clientHeight - shadow.clientHeight;
            sacle = bigImg.clientHeight / smallImg.clientHeight;

        }
        showGoods.onmouseleave = function() {
            shadow.style.display = 'none';
            scaleGoods.style.display = 'none';
            // right.style.display = 'none';

        }

        // var smallImglist = ['../day19/img/girlsmall1.jpg', '../day19/img/girlsmall2.jpg', '../day19/img/girlsmall3.jpg', '../day19/img/girlsmall4.jpg'];
        // var bigImglist = ['../day19/img/girlbig1.jpg', '../day19/img/girlbig2.jpg', '../day19/img/girlbig3.jpg', '../day19/img/girlbig4.jpg'];
        for (let i = 0; i < li.length; i++) {
            li[i].onmouseenter = function() {
                for (var j = 0; j < li.length; j++) {
                    li[j].className = '';
                }
                this.className = 'active';
                smallImg.src = bigPicList[i];
                bigImg.src = bigPicList[i];
            }
        }
        showGoods.onmousemove = function(e) {
            var e = window.event || e;
            var x = e.pageX - showGoods.offsetLeft - shadow.clientWidth / 2;
            var y = e.pageY - showGoods.offsetTop - shadow.clientHeight / 2;
            if (x < 0) x = 0;
            if (x > maxleft) x = maxleft;
            if (y < 0) y = 0;
            if (y > maxtop) y = maxtop;
            shadow.style.left = x + 'px';
            shadow.style.top = y + 'px';

            bigImg.style.left = -sacle * x + 'px';
            bigImg.style.top = -sacle * y + 'px';
        }




        $(".add").click(function() {
            var num = $(".inputs").val();
            num++;
            $(".inputs").val(num);

        })
        $(".down").click(function() {
            var num = $(".inputs").val();
            if (num > 1) {
                num--;
            }
            $(".inputs").val(num);
        })

        $(".addToCart").click(async function() {
            var cookie = document.cookie;
            var user = getCookie("lgc");
            var buynum = $(".inputs").val();
            if (user) {
                var result = await addtoshoppingcar({
                    user,
                    gid,
                    buynum
                })
                var {
                    status,
                    msg
                } = result;
                if (status) {
                    if (confirm("添加成功是否跳转购物车")) {
                        location.href = "./gouwuche.html";
                    }
                }
                // location.href = "./gouwuche.html";
            } else {
                if (confirm("您还未登录是否跳转登录页面?")) {
                    location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
                }
            }

        })







        function urlParse() {
            var search = location.search;
            var data = {};
            if (search) {
                var str = search.substr(1);
                var list = str.split("&");
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    var key = item.split("=")[0];
                    var val = item.split("=")[1];
                    data[key] = val;
                }
                console.log(data);
            }
            return data;
        }

        $(".del").click(function() {
            delCookie("lgc");
            location.reload();


        })
    })
</script>

</html>